<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:shriro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8"/>
    <title>米塔云平台管理系统</title>
    <link href="../plugins/selectivity/selectivity-jquery.css" rel="stylesheet">
    <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet">
    <link href="../customize/css/iconfont.css" rel="stylesheet">
    <link href="../customize/css/content.css" rel="stylesheet">
    <style>
        #userList thead th {
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div class="m-3">
    <div class="custom-section">
        <nav class="mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><i class="iconfont icon-xiaolan8"></i> 权限管理</li>
                <li class="breadcrumb-item active"><i class="iconfont icon-xiaolan16"></i> 用户管理</li>
            </ol>
        </nav>
        <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
                <div class="input-group">
                    <input type="text" class="form-control" id="searchValue" placeholder="快捷查询">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" onclick="getUserList();"><i
                                class="iconfont icon-dituyechaxun"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div shiro:hasPermission="sys:role:opera">
                <button class="btn btn-primary" type="button" onclick="addUser()"><i class="fa fa-plus"></i> 添加用户
                </button>
            </div>
        </div>
        <table id="userList" class="table table-striped table-bordered table-center"></table>
        <div id="page" class="page_div"></div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="editInfoModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content text-body" id="editInfoForm">
            <div class="modal-header">
                <div class="modal-title"><i class="iconfont icon-juxing"></i><span id="modal_title">修改用户信息</span></div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-secondary font-p12 mb-2">注：带<span class="form-required">*</span><span
                        class="ml-3"></span>标识的为必填项
                </div>
                <input type="text" id="id" name="id" hidden>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="displayName">用户名<span
                            class="form-required">*</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="displayName" id="displayName" maxlength="16">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="username">手机号<span
                            class="form-required">*</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="username" id="username" disabled>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="role">角色<span class="form-required">*</span></label>
                    <div class="col-sm-8">
                        <select class="form-control" name="role" id="role"></select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="expire">有效期</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="expire" id="expire" autocomplete="off">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="company_list">组织<span
                            class="form-required">*</span></label>
                    <div class="col-sm-8">
                        <div class="selectivity-input form-control" id="company_list"></div>
                        <input class="form-control position-absolute" type="text" name="enterprise"
                               id="company_list_vld" style="opacity: 0">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="areaDisplayName">权限区域<span
                            class="form-required">*</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="areaDisplayName" id="areaDisplayName"
                               autocomplete="off">
                        <input class="form-control" type="text" name="area" id="area" hidden>
                        <ul class="list-group" id="listGroup1" style="display: none;"></ul>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="device_group_list_vld">数据范围</label>
                    <div class="col-sm-8">
                        <div class="selectivity-input form-control" id="device_group_list"
                             style="height: auto;min-height: 36px;"></div>
                        <input class="form-control position-absolute" type="text" name="group"
                               id="device_group_list_vld" style="opacity: 0">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="status">访问状态</label>
                    <div class="col-sm-8">
                        <select class="form-control" name="status" id="status">
                            <option value="1">允许</option>
                            <option value="0">禁止</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="desc">备注</label>
                    <div class="col-sm-8">
                        <textarea class="form-control" name="desc" id="desc" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary">提交保存</button>
            </div>
        </form>
    </div>
</div>
</body>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../plugins/bootstrapValidator/zh_CN.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../plugins/paging.js"></script>
<script src="../plugins/laydate/laydate.js"></script>
<script src="../plugins/selectivity/selectivity-jquery.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../customize/js/usersManagement.js"></script>
<script src="../customize/js/area.js"></script>
<script>
    var sysUserView = false;
    var sysUserOpera = false;
    var label = ['order', 'displayName', 'username', 'roleSet', 'organization', 'areaName', 'status', 'expire', 'createTime', 'desc'];
    var title = ['#', '用户名', '手机号', '角色', '组织', '权限区域', '访问状态', '有效期', '注册时间', '备注'];
</script>

<shriro:hasPermission name="sys:role:view">
    <script>
        sysUserView = true;
    </script>
</shriro:hasPermission>

<shiro:hasPermission name="sys:role:opera">
    <script>
        sysUserOpera = true;
        label.push('opera');
        title.push('操作');
    </script>
</shiro:hasPermission>
</html>
